<template>
<div class="TaskPlanningList" >
    <el-row>
        <el-col :span="24">
            <el-card>
                <el-form :inline="true" :model="searchData" class="demo-form-inline messageInput" label-position="left">
                    <el-form-item label="图斑ID">
                        <el-input v-model="searchData.landCode" maxlength="8" show-word-limit placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="地塘块命名">
                        <el-input v-model="searchData.landName" maxlength="30" show-word-limit placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="镇街">
                        <el-select v-model="searchData.subjectTownId" placeholder="选择镇街" @change="changeTownCode">
                            <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="村居">
                        <el-select v-model="searchData.subjectVillageId" placeholder="选择村居" @change="changeVillageCode">
                            <el-option v-for="(item, index) in VillageOptions" :key="index" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="所属主体">
                        <el-input v-model="searchData.subjectName" maxlength="30" show-word-limit placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="地块类型">
                        <el-cascader v-model="searchData.landType" :props="{ checkStrictly: true }" filterable :options="cascaderOptionsOne" @change="handleChange" style="width: 100% !important">
                        </el-cascader>
                    </el-form-item>
                    <el-form-item label="农产品分类">
                        <el-cascader v-model="searchData.landProduct" :options="cascaderOptionsTwo" :props="{ checkStrictly: true }" filterable @change="handleChangeTwo" style="width: 100% !important">
                        </el-cascader>
                    </el-form-item>

      <el-form-item label="面积(范围)">
                        <el-input v-model="searchData.muBegin" minlength="1" maxlength="5" show-word-limit placeholder="起始" style="width:110px"></el-input>
                        -
                        <el-input v-model="searchData.muEnd" minlength="1" maxlength="5" show-word-limit placeholder="结束" style="width:110px"></el-input>
                    </el-form-item>


                    <!-- <el-form-item label="品种" class="item_right">
              <el-input
                v-model="searchData.variety"
                placeholder="请输入"
              ></el-input>
            </el-form-item> -->

                    <el-form-item label="行业">
                        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                            <el-checkbox v-for="(city, index) in cities" :label="city.value" :key="index">{{ city.label }}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>

                    <el-button type="primary" @click="searchLand()">查询</el-button>
                    <el-button @click="resetValues()">重置</el-button>
                </el-form>
            </el-card>
        </el-col>
    </el-row>

    <el-row>
        <el-col :span="24">
            <el-card class="el-card" shadow="never">
                <!--		<div slot="header" class="clearfix">-->
                <!--		<span></span>-->
                <!--		<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
                <!--		</div>-->
                <el-table :data="List" fixed style="width: 100%">
                    <el-table-column fixed prop="landCode" label="图斑ID">
                    </el-table-column>
                    <el-table-column prop="landName" label="地塘块命名">
                    </el-table-column>
                    <el-table-column prop="landTownName" label="镇街">
                    </el-table-column>
                    <el-table-column prop="landVillageName" label="村居">
                    </el-table-column>
                    <el-table-column prop="mu" label="面积(亩)"> </el-table-column>
                    <el-table-column prop="landTypeName" label="地块类型">
                    </el-table-column>
                    <!-- <el-table-column prop="coordinate" label="坐标"> </el-table-column> -->
                    <el-table-column prop="subjectNames" label="所属主体">
                    </el-table-column>
                    <el-table-column prop="landProductName" label="农产品分类">
                    </el-table-column>
                    <el-table-column prop="landOtherType" label="品种">
                        <template slot-scope="scope">
                            <span v-if="scope.row.landOtherType=='null'"></span>
                            <span v-else>{{scope.row.landOtherType}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="操作" fixed="right">
                        <template slot="header">
                            <el-button type="primary" @click="downloadFile">导出Excel</el-button>
                        </template>

                        <template slot-scope="scope">
                            <el-button @click.stop="handleClick(scope.row)" type="text" size="small">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="bottom">
                    <el-pagination background @size-change="handleSizeChange" @current-change="currentchange" :current-page="paging.pageNum" :page-sizes="[5, 10, 20, 30, 40]" :page-size="paging.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="paging.total">
                    </el-pagination>
                </div>
            </el-card>
        </el-col>
    </el-row>

    <el-dialog title="图斑信息-地塘块信息" :key="r"  :visible.sync="LandParcelInfoVisible" width="65%">
        <AcquisitionInterface v-if="spotID" :key="spotID" :isShow="false" :currentTask="currentTask" :spotID="spotID" :userInfo="userInfo">图斑信息采集界面</AcquisitionInterface>
    </el-dialog>

</div>
</template>

<script>
import {
    mapState
} from 'vuex';
// import PlotMsg from "@/components/PlotMsg/PlotMsg";
import cityOptions from "@/views/mixins/cityOptions.js";
import {
    convertKey
} from "@/library/index.js";
export default {
    mixins: [cityOptions],
    name: "TaskPlanningList",
    // components: {
    //   PlotMsg,
    // },
    data() {
        return {
            r:"",
            remoteSensingData: "",
            spotID: "",
            search: {
                planName: "",
                value: "",
            },
            searchData: {
                landType: "",
                landCode: "",
                landName: "",
                landTownCode: "",
                landVillageCode: "",
                lsSubjectCode: "",
                landProduct: "",
                subjectName: "",
                systemTypes: [],
                pageNumber: 1,
                pageSize: 10,
                subjectTownId: "",
                subjectVillageId: "",
                        muBegin: 0,
                muEnd: ""
            },
            params: {
                pageNumber: 1,
                pageSize: 10,
                systemTypes: [],
            },
            paging: {},
            List: [],
            options: [],
            VillageOptions: [],
            townIndex: 0,
            LandParcelInfo: {},
            LandParcelInfoVisible: false,
            landCancelVisible: false,
            multipleSelection: [],
            tableData: [],
            subjectFormRow: {},
            subjectData: [],
            type: "",

            cascaderOptionsOne: [],
            cascaderOptionsTwo: [],
        };
    },
    // beforeRouteEnter (to, from, next) {
    //     // ...
        
    //     alert(111)

    //     next()
    // },
    computed: {
        ...mapState({
            taskObject: (state) => {
                return state.taskmodel.taskObject;
            },
            currentTask: (state) => {
                return state.currentTask.Task;
            },
            userInfo: (state) => {
                return state.User.userInfo;
            },
        }),
    },
    created() {
        this.params.systemTypes = this.checkedCities;
        this.$set(this.searchData, "systemTypes", this.checkedCities);
        this.ProductionInformationBase();
        this.selectData();
        this.getLandTypeList();
        this.getLandProductList();
    },
    methods: {
        handleChange(value) {
            this.searchData.landType = value[value.length - 1];
        },

        handleChangeTwo(value) {
            this.searchData.landProduct = value[value.length - 1];
        },
        closeLandParcelInfoVisible() {
            if (this.LandParcelInfoVisible) {
                this.LandParcelInfoVisible = false;
            }
        },
        changeTownCode(TownCode) {
            this.VillageOptions = [];
            this.options.forEach((item) => {
                item.children.forEach((item) => {
                    if (item.value.substring(0, 9) === TownCode) {
                        this.searchData.subjectVillageId = "";
                        this.VillageOptions.push(item);
                    }
                });
            });
            console.log(this.VillageOptions);
        },
        changeVillageCode(subjectVillageId) {
            this.$set(this.searchData, "subjectVillageId", subjectVillageId);
            console.log(this.searchData);
        },
        downloadFile() {
            this.params = {
                "landInfo.landCode": this.searchData.landCode,
                "landInfo.landName": this.searchData.landName,
                "landInfo.landTownCode": this.searchData.subjectTownId,
                "landInfo.landVillageCode": this.searchData.subjectVillageId,
                "landSubject.lsSubjectCode": this.searchData.lsSubjectCode,
                "landInfo.landProduct": this.searchData.landProduct,
                "landInfo.landType": this.searchData.landType,
                subjectName: this.searchData.subjectName,
                systemTypes: this.searchData.systemTypes.join(","),
            };
            this.$confirm("此操作将导出文件, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                const loading = this.$loading({
                    lock: true,
                    text: '文件生成导出中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.8)'
                });
                setTimeout(() => {
                    this.$axios.post("rbac/data/landInfo/Excel", {
                        params: this.params,
                    }).then((res) => {
                        location.href = res.data.imgUrl;
                        loading.close();
                    });
                }, 10);
            });
        },
        handleCheckedCitiesChange(value) {
            let checkedCount = value.length;
            if (checkedCount) {
                this.$set(this.searchData, "systemTypes", value);
            } else {
                delete this.searchData.systemTypes;
            }
            this.checkAll = checkedCount === this.cities.length;
            this.isIndeterminate =
                checkedCount > 0 && checkedCount < this.cities.length;
        },
        getLandTypeList() {
            this.$axios
                .get("/baseinfo/api/v1.0/fishing/landType/selectAll")
                .then((res) => {
                    this.cascaderOptionsOne = convertKey(res.data.list, {
                        landTypeName: "label",
                        landTypeCode: "value",
                    });
                    console.log(this.cascaderOptionsOne);
                });
        },
        getLandProductList() {
            this.$axios
                .get("/baseinfo/api/v1.0/fishing/landTypep/productType/getList")
                .then((res) => {
                    console.log(res);
                    this.cascaderOptionsTwo = convertKey(res.data.list, {
                        productTypeName: "label",
                        productTypeCode: "value",
                    });
                });
        },
        selectData() {
            let json = JSON.parse(
                window.localStorage.getItem("getTreeData/setAsyncVillageData")
            );
            this.options = json[0].children[0].children;
        },
        statusChange(item) {
            console.log(item);
        },
        onSearch() {},
        handleSizeChange(pageSize) {
            this.params.pageSize = pageSize;
            console.log(this.params);
            this.ProductionInformationBase();
        },
        handleClick(row) {
            this.r = Math.random()
            console.log(row)
            this.spotID = row.landCode
            // console.log(this.searchData);
            // this.subjectFormRow = row;
            // this.type = false;
            this.LandParcelInfoVisible = true;
        },
        getSubjectInfoList(row) {
            // let row = this.subjectFormRow
            console.log(row);
            let params = {
                "landSubject.lsLandCode": row.landCode,
                "landSubject.lsSubjectCode": "",
            };
            this.$axios
                .get("/rbac/data/LandSubject/get", {
                    params: params,
                })
                .then((res) => {
                    if (res.data.list.length > 0) {
                        this.subjectData = res.data.list;
                    } else {
                        this.subjectData = [];
                    }
                    this.LandParcelInfoVisible = true;
                });
        },
        currentchange(pageNumber) {
            this.LandParcelInfoVisible = false;
            this.params.pageNumber = pageNumber;
            this.ProductionInformationBase();
        },
        ProductionInformationBase() {
            if (this.params.systemTypes instanceof Array) {
                this.params.systemTypes = this.params.systemTypes.join(",");
            } else {
                this.params.systemTypes = this.params.systemTypes;
            }

            console.log(this.params);
            this.$fishing.ProductionInformationBase(this.params).then((res) => {
                this.List = res.data.list;
                delete res.data.list;
                this.paging = res.data;
            });
        },
        searchLand() {
            this.params = {
                "landInfo.landCode": this.searchData.landCode,
                "landInfo.landName": this.searchData.landName,
                "landInfo.landTownCode": this.searchData.subjectTownId,
                "landInfo.landVillageCode": this.searchData.subjectVillageId,
                "landSubject.lsSubjectCode": this.searchData.lsSubjectCode,
                "landInfo.landProduct": this.searchData.landProduct,
                "landInfo.landType": this.searchData.landType,
                subjectName: this.searchData.subjectName,
                muBegin: this.searchData.muBegin,
                muEnd: this.searchData.muEnd,
                systemTypes: this.searchData.systemTypes.join(","),
            };
            this.$axios
                .get("rbac/data/LandInfo/getList", {
                    params: this.params,
                })
                .then((res) => {
                    console.log(res.data);
                    this.List = res.data.list;
                    this.paging = res.data;
                });
        },
        resetValues() {
            this.searchData.landCode = "";
                this.searchData.landName = "";
            this.searchData.subjectName = "";
            this.searchData.subjectType = "";
            this.searchData.subjectIndustry = "";
            this.searchData.landTownCode = "";
            this.searchData.subjectTownId = "";
             this.searchData.subjectVillageId="";
            this.searchData.landVillageCode = "";
            this.searchData.subjectAddr = "";
            this.searchData.subjectLinkman = "";
            this.searchData.subjectTele = "";
            this.searchData.subjectCard = "";
            this.searchData.landProduct = "";
            this.searchData.landType = "";
            this.searchData.muBegin="",
            this.searchData.muEnd="",
            // this.searchData = {}
            this.VillageOptions = [];
        },
    },
};
</script>

<style lang="scss">
.TaskPlanningList {
    .form {
        padding: 15px 10px;
    }

    .el-card {
        width: 98%;
        margin: 15px auto 0;

        .bottom {
            display: flex;
            justify-content: flex-end;
            margin-top: 15px;
        }
    }
}
</style>
